<template>
  <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.3)">
    <div class="editor-btn">
      <!-- 执行按钮 -->
      <el-button @click="exec(1, 'exec')" class="exec-btn" :disabled="execBtnDisable">
        <i class="el-icon-caret-right exec-i"></i>
        <span>执行</span>
      </el-button>
      <!-- 清除按钮 -->
      <el-button type="text" icon="el-icon-edit" class="clear-btn" @click="clear">
        清除
      </el-button>
    </div>
    <div>
      <!-- 编辑器 -->
      <codemirror v-model="code" :options="editorOptions" class="code-mirror" />
    </div>
    <div>
      <!-- 执行结果 -->
      <div class="result-div">
        <i class="el-icon-s-grid"></i>
        <span>执行结果</span>
      </div>
      <div class="horizontal-line"></div>
    </div>
    <div class="result-set" v-if="isShowResult">
      <OutputReturn :tableData="tableData" :tableHeaders="tableHeaders" :execResult="execResult" :isShowTable="isShowTable" :isExecResult="isExecResult" />
      <center class="dataPagin" v-if="isShowTable">
        <el-button :disabled="pageNum == 1" style="border: 0px" @click="lastPage">
          上一页
          <i class="el-icon-caret-left" />
        </el-button>
        第 {{ pageNum }} 页
        <el-button style="margin-left: 0; border: 0px" @click="nextPage">
          下一页
          <i class="el-icon-caret-right" />
        </el-button>
        <div class="page-sizes">
          <el-select v-model="pageSize" size="small" @change="handlePageSizeChange">
            <el-option :key="10" label="10条/页" :value="10"></el-option>
            <el-option :key="20" label="20条/页" :value="20"></el-option>
            <el-option :key="50" label="50条/页" :value="50"></el-option>
            <el-option :key="100" label="100条/页" :value="100"></el-option>
          </el-select>
        </div>
      </center>
    </div>
  </div>
</template>
<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/ambiance.css";
import "codemirror/theme/darcula.css";
import "codemirror/theme/colorforth.css";
import "codemirror/theme/pastel-on-dark.css";
import "codemirror/theme/twilight.css";
import { sqlData } from "../components/sqlStatements.js";
import Output from "@/components/Output.vue";
import OutputReturn from "@/components/OutputReturn.vue";
import axios from "../plugins/axios.js";
import store from "../store.js";
export default {
  name: "Editor-Page",
  components: {
    codemirror,
    Output,
    OutputReturn
  },
  data() {
    return {
      code: "",
      sqlId: 2,
      editorOptions: {
        mode: "text/x-mysql",
        theme: "colorforth",
        lineNumbers: true,
        line: true,
        lint: true,
        style: "matchhighlight",
        minChars: 2
      },
      sql: sqlData,
      isShowResult: false,
      tableData: [],
      tableHeaders: [],
      execResult: "",
      loading: false,
      pageNum: 1,
      pageSize: 10
    };
  },
  computed: {
    //执行按钮的禁用状态
    execBtnDisable() {
      return !this.$store.state.applySuccess;
    }
  },
  mounted() {
    window.eventBus.$on("copyToEditor", code => {
      this.code = code;
      this.isShowResult = false;
    });
  },
  beforeDestroy() {
    window.eventBus.$off("copyToEditor");
    window.eventBus.$off("outputReturn");
  },
  methods: {
    async exec(pageNo, type) {
      if (this.code == "") {
        this.$message({
          message: "请输入需要执行的SQL语句！",
          type: "warning"
        });
        return;
      }
      this.tableData = [];
      this.execResult = "";
      if (pageNo == 1) {
        this.pageNum = 1;
      }
      this.loading = true;
      const data = await store.dispatch("executeSql", {
        pageNum: pageNo,
        pageSize: this.pageSize,
        sql: this.code
      });
      this.loading = false;

      //显示接口返回信息
      if (data.success) {
        if (data.headers && data.headers.length > 0) {
          this.tableData = data.data.filter(item => !!item);
          this.tableHeaders = data.headers;
          this.isShowResult = true;
          this.isShowTable = true;
          this.isExecResult = false;
        } else {
          //成功但是没有data数据
          if (type == "exec") {
            this.execResult = "执行成功！ " + (data.message || "");
            this.isShowResult = true;
            this.isShowTable = false;
            this.isExecResult = true;
          } else if (type == "nextPage") {
            this.pageNum = this.pageNum - 1;
            this.exec(this.pageNum, "exec");
            this.$notify.warning("无更多数据");
          }
        }
      } else {
        //失败有报错信息
        this.execResult = "执行失败 " + (data.message || "");
        this.isShowResult = true;
        this.isShowTable = false;
        this.isExecResult = true;
      }
    },
    clear() {
      this.code = "";
    },
    lastPage() {
      this.pageNum = this.pageNum - 1;
      this.exec(this.pageNum, "lastPage");
    },
    nextPage() {
      this.pageNum = this.pageNum + 1;
      this.exec(this.pageNum, "nextPage");
    },
    handlePageSizeChange() {
      this.pageNum = 1;
      this.exec(1, "exec");
    }
  }
};
</script>

<style  scoped>
.el-button {
  font-size: 16px !important;
}

.editor-btn {
  line-height: 60px;
}

.exec-btn {
  color: #fff;
  background-color: #383842;
  border-color: #383842;
  width: 90px;
  height: 32px;
  margin: 0 0 0 20px;
  padding: 0 15px;
}

.exec-btn .exec-i {
  color: #b81c22;
  font-size: 20px;
}

.exec-btn .span {
  margin: 0 auto;
}

.el-button--default:hover,
.el-button--default:focus {
  background-color: #4e4e5c;
  border-color: #4e4e5c;
  color: #fff;
}

.clear-btn {
  color: #fff;
  margin: 0 0 0 40px;
}

.clear-btn:hover,
.clear-btn:focus {
  color: #b81c22;
}

.result-div {
  color: #bec8d2;
  background-color: #212e40;
  width: 120px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 2px;
  margin: 10px 0 0 20px;
}

.result-div i {
  padding: 0 6px;
}

.horizontal-line {
  border-top: 1px solid #2f3032;
  /* 设置顶部边框*/
  height: 0;
  /* 设置高度为0，使得div没有高度，只显示边框 */
}

.code-mirror {
  font-size: 18px;
  line-height: 150%;
}

.el-message__content {
  color: #515151 !important;
}

.dataPagin {
  padding: 6px;
  position: relative;
  left: 30%;
  line-height: 30px;
  display: flex;
  align-items: center;
  width: 400px;
  color: #fff;
}

.dataPagin .el-input-number {
  width: 50px;
  margin: 0 5px;
}

.dataPagin .el-button,
.dataPagin .el-button--default .el-button--default:focus,
.dataPagin .el-button--default:hover {
  background-color: #131416;
  border-color: #131416;
  color: #fff;
}

.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  background-color: #131416;
  border-color: #131416;
  color: #383842;
}

.dataPagin .page-sizes {
  width: 100px;
  overflow: hidden;
}

.dataPagin .el-input__icon {
  height: 40px;
  position: relative;
  top: -6px;
}
.dataPagin .el-select-dropdown__list {
  background-color: rgb(53, 54, 56);
  color: #fff;
}
.dataPagin .el-select-dropdown__item.selected {
  color: #b81c22;
}

::v-deep(.dataPagin .el-input-number.el-input__inner) {
  padding: 0;
  height: 30px;
  text-align: center;
}

::v-deep(.el-input--small .el-input__inner) {
  padding: 0 8px;
  height: 30px;
  line-height: 30px;
  width: 90px;
  background-color: #131416;
  border-color: #353638;
  color: #fff;
}
</style>
